<!DOCTYPE html> 
<html>

<head>
  <title></title>
  
  
  
  <?php
      include_once('head.php'); 
   ?> 
  
  <!-- <script type="application/javascript" src="iscroll4/src/iscroll.js"></script> -->

  <!-- spostati in head
  <link href="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" /> 
  -->

  <style>
	.block {
	  padding: 0px;
	  width: 50%;
	  }
  
	.block a:link    {
	  /* Applies to all unvisited links */
	  text-decoration:  none;
	  } 
	.block a:visited {
	  /* Applies to all visited links */
	  text-decoration:  none;
	  } 
	.block a:hover   {
	  /* Applies to links under the pointer */
	  text-decoration:  underline;
	  } 
	.block a:active  {
	  /* Applies to activated links */
	  text-decoration:  underline;
	} 
  
  #container {
  width: inherit !important;
  margin: 100%;
  }
  </style>
 



  <!--  for blocksit : pinterest effect -->

  <link rel='stylesheet' href="blocksit/style-custom.css" media='screen' />
  <script src="blocksit/blocksit.min.js"></script>


  
  
  
  <!-- css per il footer -->
  <style>
      .nav-glyphish-example .ui-btn .ui-btn-inner { height:25px; padding-top: 10px !important; }
      .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; /*height: 25px!important;*/ margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
      #home .ui-icon { background:  url(images/glyphish-icons-png/53-house.png) 50% 50% no-repeat; background-size: 18px 18px; }
      #search .ui-icon { background:  url(images/glyphish-icons-png/06-magnify.png) 50% 50% no-repeat; background-size: 18px 16px;  }
      #gift .ui-icon { background:  url(images/glyphish-icons-png/24-gift.png) 50% 50% no-repeat;  background-size: 14px 20px; }
      #wishlist .ui-icon { background:  url(images/glyphish-icons-png/28-star.png) 50% 50% no-repeat;  background-size: 22px 22px; }
   </style>
  


  <!-- spostati in head.php
  <script type="application/javascript" src="jquery-mobile-iscrollview-master/demo/build/javascripts/iscroll.js"></script>
  <script type="application/javascript" src="jquery-mobile-iscrollview-master/lib/jquery.mobile.iscrollview.js"></script>

  -->
 
  
  <script type="text/javascript"> 


  
  	 function Gift(giftname, giftdest, giftbudget){
 	      this.name = giftname;
 	      this.dest = giftdest;
 	      // this.budget_min = giftbudget_min;
 	      // this.budget_max = giftbudget_max; 
 	      this.budget = giftbudget;
 	      this.products = null; 
 	  }

    
    // recupero l'oggetto dato la key 'gift'  
  	function getFromSession() {
		  return JSON.parse(sessionStorage.getItem('gift')); 
  	  	 }

  	 
  	function print() {
		var g = getFromSession();
		var s = 'Nome: ' + g.name + ' Destinatario: ' + g.dest + ' budget: ' + g.budget; 
		alert(s);
		alert(g.products);
		  }

    
    function updateProductsArray(products) {
      var gift = getFromSession();
      
      if (gift != null) {
        gift.products = products;
        sessionStorage.setItem('gift', JSON.stringify(gift) );
      }
      
      //print();
      
    }
    

/*
  	
  	 function updateInSession() {
  		var gift = getFromSession();
  		gift.budget_min = $('#budget_min').val();
		  gift.budget_max = $('#budget_max').val();

		  //print();

		  sessionStorage.setItem('gift', JSON.stringify(gift) );

		   //print();
  	  	 }
*/
  	
  	 
 	  function get_giftname() {
 	 	var gift = getFromSession();
 		return gift.name;
 		  } 

	  function get_giftdest() {
		 var gift = getFromSession();
		 return gift.dest;
		  }

	  function get_giftbudget() {
		 var gift = getFromSession();
		 return gift.budget;
			}

	  


	

  
  $(document).ready(function(){ 

		
		$("#page_list_categories a").live("click", function (event) {
		      
		      var param = $(this).attr("data-parm");      
		      $("#page_list_item div[data-role=header] h1").html(param);

				
		      
		      
		      // with param I can get data via ajax
		      
		      $.ajax({ url: "get_list_item.php",
		        type: 'POST',
		        data: 'tipo='+sessionStorage.tipo+"&item_type=" + param+'&budget='+sessionStorage.budget,
		        success: function(data) {          
		          //alert(data);
		           $("#page_list_item div[data-role=content] ul").html(data);

		           $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
		           
 		        	 $("#page_list_item div[data-role=content]").iscrollview("refresh");
          
		          }
		        }); // end ajax            
		        
		        
		      });


  
  /* chiamata ajax per costruire la scheda prodotto con le info specifiche di un prodotto */
        
        
     $("#page_list_item div[data-role=content] a").live("click", function (event) {
          //alert();
          
          var param = $(this).attr("data-parm");      
          //$("#page_list_item div[data-role=header] h1").html(param);

          
          
          // with param I can get data via ajax
          
          
          $.ajax({ url: "script_build_scheda_prodotto.php",
            type: 'POST',
            data: "product_code=" + param,
            success: function(data) {          
              //alert(data);
              
              
              /* devo aspettare di caricare il contenuto via ajax e poi mostrare la pagina con il
               * contenuto, altrimenti si vede il vecchio prodotto in attesa del tempo di latenza
               * dal server. 2 possibilità:
               * 1- usare il gif loader che carica in attesa del contenuto (usata)
               * 2- i tag <a href="#" senza specificare l id della quarta pagina ed utilizzo
               * il metodo changePage dopo il success della chiamata ajax.  
               * */
              
              //$.mobile.changePage( "#scheda_prodotto", { transition: "slideup"} );
              
              
              $("#scheda_prodotto div[data-role=content] ul").html(data).trigger('create');
                              
              $("#scheda_prodotto div[data-role=content] ul" ).listview("refresh");

                }
            }); // end ajax            
           
            
          });

  
  
  
  
  $("[name=addProduct]").live("click", function (event) {
      
      
      var giftsSelected = new Array();
      
      var gift = getFromSession();
      
      if (gift != null) 
       if (gift.products != null) 
          giftsSelected = gift.products;
      
          
      
      var id = $(this).attr('id');
      
      //alert(id);
      giftsSelected.push(id);
      
      
      // salvo in sessione
      updateProductsArray(giftsSelected);
      
      
      
      // disable Add button
      $(this).css('pointer-events', 'none');
      /*$(this).css('color', 'white');*/
      $(this).addClass('selected');
      /*$(this).find('span').css('background-color', 'white');
      $(this).find('span').css('border', 'none');*/
      $(this).find('span').html('<img src="/images/glyphish-icons-png/117-todo.png" width="25px" />');
            
      // prendo l'id della pagina sulla quale l'utente si trova
      var activePage = $.mobile.activePage.attr("id");
      
      $('#' + activePage).find('#gifts_in_shake').css('visibility', 'visible');
      $('#' + activePage).find('#gifts_in_shake').html(giftsSelected.length);
                  
       });




  });  // end document ready





  function updateProductSelection(page) {
        
    var escaped_value = '';
    
    
    // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
      var gift = getFromSession();      
      
     if (gift != null)       
      if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $(page).find('span #gifts_in_shake').css('visibility', 'visible');
            $(page).find('span #gifts_in_shake').html(productsSelected.length);
          
         
         // disabilito per i prodotti già nello shake il tasto di Add 
          $.each( productsSelected, function( key, value ) {
              escaped_value = value.replace(/(:|\.|\[|\])/g,'\\$1');

              /*$("a#" + escaped_value).css('color','white');*/
              $("a#" + escaped_value).css('pointer-events', 'none');

              $("a#" + escaped_value).removeClass('notselected');
              $("a#" + escaped_value).addClass('selected');

              $("a#" + escaped_value).find('span').html('<img src="/images/glyphish-icons-png/117-todo.png" width="25px" />');


            });
          }        
      else {
    	  $(page).find('span #gifts_in_shake').css('visibility', 'hidden');
    	  $(page).find('span #gifts_in_shake').html('');
          } 
      }   
  }

 
  
  </script>
  
  
  <!-- To load Iscroll  -->
  
  <!-- <script type="text/javascript">
    
    var popular_scroll;
    var consigliati_scroll;
    function loaded() {
      popular_scroll = new iScroll('most_popular');
      //consigliati_scroll = new iScroll('consigliati');
    }
    
    // if set, block vertical scroll of the page
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    
    //document.addEventListener('DOMContentLoaded', loaded, false);
    
  </script> -->
  
  
  
  
  
 </head>
 
 <body>
   
   
   
   
 
 <!-- Start of first page -->

  <div id="page_giftlist" class="pull-demo-page" data-role="page" data-theme="f">
    
    
    <script type="text/javascript">
    
    
    //$( "#page_giftlist" ).live( "pageinit", function( event ) {  //init or create
      
      $(document).delegate('#page_giftlist', 'pageinit', function () {
     
      $.ajax({ url: "script_get_best_products.php",
          type: 'GET',
//          data: '', //'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
          data: 'tipo='+sessionStorage.tipo+'&budget='+sessionStorage.budget+'&profilo[]='+sessionStorage.profilo,
          //async: false,
          //dataType: 'html',
          success: function(data) {
     //         alert(data);

           $("#page_giftlist div[data-role=content] div#container").html(data);

              // faccio scattare subito il metodo container sul codice html
              // cosi da non apsettare che sia chiamato sotto dopo n sec.

              $('#container').BlocksIt({
                  numOfCol: 2,
                  offsetX: 8,
                  offsetY: 8
              });

              $("#page_giftlist div[data-role=content]").iscrollview("refresh");

           },
            
            complete: function() {
                
              setTimeout(function () {

//                  $("#page_giftlist div[data-role=content] div#container").html(data);

                  // questa chiamata temporizzata rifinisce i blocchi qualora le immagini siano state
                  // caricate dal server.

                  $('#container').BlocksIt({
                    numOfCol: 2,
                    offsetX: 8,
                    offsetY: 8
                  });

                  $("#page_giftlist div[data-role=content]").iscrollview("refresh");
            },2000);

                /* Il problema avviene quando la cache è vuota e tutte le immagini devono essere
                caricate dal server. Al termine della chiamata ajax ricevo il codice html che riporta
                la lista degli elementi sottoforma di macro blocchi. Quindi il metodo blocksit
                elabora questi blocchi dando l'aspetto a 2 colonne. Però subito dopo o nel mentre
                partono anche le chiamate GET per reperire dal server le immagini (tag img src) dei diversi
                blocchi. Quando vengono caricate si aumentano le dimensioni dei blocchi che vanno uno sopra
                l'altro.

                Soluzione: il blocksit dovrebbe essere chiamato dopo che anche le immagini sono state caricate
                e posizionate nei blocchi. Se cosi allora funziona bene, infati non c è problema se le immagini
                sono in cache xk vengono prelevate subito e non esiste ritardo. Aggingo dunque una
                temporizzazione.
                 */


                    
            }
           
          
          }); // end ajax

    });



     /* ----------------------------------
     *
     *  Prima che la pagina venga mostrata
     *
	   *  ----------------------------------
     */ 
      
     $( "#page_giftlist" ).live( "pagebeforeshow", function( event ) {  

         // reset dei pulsanti di Add
//         $("a[name=addProduct]").css('color','white');
         $("a[name=addProduct]").css('pointer-events', 'initial');
         $("a[name=addProduct]").find('span').html('Aggiungi');
         $("a[name=addProduct]").removeClass('selected');
         $("a[name=addProduct]").addClass('notselected');

        
        updateProductSelection('#page_giftlist');

    	 
       });
       
      
      
     $('#page_giftlist').live('pageshow', function() {
    	     
      // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 


         $('#container').BlocksIt({
            numOfCol: 2,
            offsetX: 8,
            offsetY: 8
          });

         $("#page_giftlist div[data-role=content]").iscrollview("refresh");    
      
      });
    
   
    </script>
    
  <!--
  <div data-role="panel" id="optpanel" data-theme="f">        
  
     <ul data-role="listview" data-inset="false" data-filter="true" data-divider-theme="b">
      <li data-role="list-divider"></li>
      <li><a href="#">Profilo</a></li>
      <li data-role="list-divider">Attività</li>
      <li><a href="#">Inviti</a></li>
      <li><a href="#">In corso</a></li>
      <li><a href="#">Da inviare</a></li>
      <li><a href="#">Inviati</a></li>
      <li data-role="list-divider"></li>
      <li><a href="#">Impostazioni</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
    
  </div>
-->
  
  <div id="my-header" data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false">
  	<!--<a href="#optpanel" class="ui-btn-left recticon" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="f" data-inline="true">Options</a>-->
      <h1>I nostri consigli</h1>
      <!--  a id="fer" href="#page2" class="ui-btn-right" data-icon="arrow-r">Next</a style="font-size: 14px; color:#366097"-->
      <a href="#page_list_categories" class="ui-btn-right rectbutton">Categorie</a>
  </div><!-- /header -->

  <div data-role="content" data-iscroll>
   
    <!-- use scroll with dynamic grid data-iscroll="" -->
    <div id="container"  class="ui-grid-solo" >
    
    </div>  
    
    <div class="iscroll-pullup">
        <span class="iscroll-pull-icon"></span>
        <span class="iscroll-pull-label" data-iscroll-loading-text="Caricamento..." data-iscroll-pulled-text="Custom pulled text">Custom reset text</span>
    </div>
  
  
  </div>  <!-- content -->
  

	 
      
      <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c data-tap-toggle="false">
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="home.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#all_gifts" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->	


  </div> <!-- end page -->
  

  
 <!-- 
 			=============================================
 						Seconda Pagina: Categorie
 			=============================================			
  -->
  
  
   <script type="text/javascript">

		var scrollCateg;
		function loadedCat() {
			scrollCateg = new iScroll('wrapper_categ');
		}
		
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		
		document.addEventListener('DOMContentLoaded', loadedCat, false);

		$('#page_list_categories').live('pageshow', function() {
		  
		  // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
		  var gift = getFromSession();
		  if (gift != null)
       if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $('#page_list_categories #gifts_in_shake').css('visibility', 'visible');
            $('#page_list_categories #gifts_in_shake').html(productsSelected.length);
          }
      }
		  
		  
			setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!
		    scrollCateg.refresh();   // Remember to refresh when contents are loaded (ie: on ajax completion)
			  }, 0); // <-- Simulate network congestion, remove setTimeout from production!
			});
	
	</script>
  
<style type="text/css" media="all">

.wrapperv {
	position:absolute; 
	z-index:1;
	top:40px; 
	bottom:48px; 
	left:0;
	width:100%;
	background:#aaa;
	overflow:auto;
	

}

.scrollerv {
	position:absolute; 
	z-index:1;
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
/* 	padding:0; */
}

.scrollerv ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

.scrollerv li {
	/*padding:0 10px;*/
	/*height:40px;
	line-height:40px;*/
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	/*font-size:14px;*/
} 

  
  </style>
  
  
  

    <div data-role="page" id="page_list_categories" data-theme="f">
      
    <script>
       $( "#page_list_categories" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#page_list_categories a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
      
    <div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false">
      <!-- quando clicco su back forzo il reload della pagina cosi che venga 
        ricaricato tutto il javascript necessario per gli iscroll.
        In alternativa posso gestire tutte le pagine in file html/php esterni
        senza utilizzare ajax. Nelle chiamate userò rel="external".
        Adesso funziona anche senza ricaricare tutta la pagina e il js
        perchè allo show della terza pag faccio il refresh di iscroll.
        -->
       <!-- <a href="#" class="backbutton" onclick="window.location.href = &quot;page.gift_list.php&quot;">Back</a> -->
       <a href="#page_giftlist" class="backbutton" >Back</a>
      <!-- <a href="#page_giftlist" data-rel="back"  data-icon="arrow-l" >Back</a> -->
      
      <h1>Categorie</h1>
    </div>
 <!--   <div class="wrapperv" id="wrapper_categ" data-theme="f">--> <!-- data-role="content" -->
			<div class="scrollerv">
			  <ul id="categList" data-role="listview" class="ui-icon-alt">
			  	<!-- <li><a href="get_new_list_url.php?param=riviste" rel="external" data-parm="riviste">Riviste</a></li> -->
	        <li><a href="#page_list_item" data-parm="riviste">Riviste</a></li> <!-- or via call external and not ajax -->	        
	        <li><a href="#page_list_item" data-parm="accessori-sport">Accessori Sport</a></li>
	        <li><a href="#page_list_item" data-parm="elettronica">Elettronica</a></li>
	        <li><a href="#page_list_item" data-parm="gioielli">Gioielli</a></li>
	        <li><a href="#page_list_item" data-parm="giornate-avventura">Giornate avventura</a></li>
	        <li><a href="#page_list_item" data-parm="peccati-di-gola">Peccati di gola</a></li>
	        
            <!--
	        <li><a href="#" data-parm="libri">Libri</a></li>	        
	        <li><a href="#" data-parm="informatica">Informatica</a></li>
	        <li><a href="#" data-parm="profumeria">Profumeria</a></li>
	        <li><a href="#" data-parm="vestiario">Vestiario</a></li>
	        <li><a href="#" data-parm="accessori">Accessori</a></li>        
	        <li><a href="#" data-parm="aperitivi">Aperitivi</a></li>
	        <li><a href="#" data-parm="viaggi">Viaggi</a></li>	      	-->
	      </ul>
	    </div>
	<!--   </div>-->
    
    <div id="footer" data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c data-tap-toggle="false">
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>

            <li><a href="home.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="page.gift_list.php" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#all_gifts" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->  
  </div>
  
  
  
  <style>
    #page_list_item div[data-role="content"] ul li { height: 100px; }
    /*#page_list_item div#scroller ul li { height: 100px; }*/
    #page_list_item img { padding: 5px;   }
  
  </style>
  

  
  
  
  
<script type="text/javascript">


/* Works */
$('#page_list_item').live('pageshow', function() {
  
  //alert();
  
  // carico dalla sessione
  var gift = getFromSession();
  if (gift != null)
   if (gift.products != null) {
    var productsSelected = gift.products;
    if (productsSelected.length > 0) {
        $('#page_list_item #gifts_in_shake').css('visibility', 'visible');
        $('#page_list_item #gifts_in_shake').html(productsSelected.length);
      }
  }

/*	$('#container').BlocksIt({
		numOfCol: 2,
		offsetX: 8,
		offsetY: 8
	});
*/	

$("#page_list_item div[data-role=content]").iscrollview("refresh");
	
	});


  </script>





<script>
  
  


//-------------------------------------------------------
// Pull-Up and Pull-Down callbacks for "Pull" page
//-------------------------------------------------------
(function pullPagePullImplementation($) {
  "use strict";


  $.ajax({ url: "script_get_best_products.php",
      type: 'GET',
      async: false,
      //data: '', //'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
     // async: false,
      data: 'tipo='+sessionStorage.tipo+'&budget='+sessionStorage.budget+'&profilo[]='+sessionStorage.profilo,
      
      success: function(data) {
        // get content and put inside the div container
         $("#page_giftlist div#container").html(data);

     /*	
         $('#container').BlocksIt({
     	      numOfCol: 2,
     	      offsetX: 8,
     	      offsetY: 8
     	    });
     */  
     //    $("#page_giftlist div[data-role=content]").iscrollview("refresh");
         
          }
  });


  
  var pullDownGeneratedCount = 0,
      pullUpGeneratedCount = 0,
      listSelector2 = "# ul.ui-listview",
      lastItemSelector2 = listSelector2 + " > li:last-child",
      listSelector = "div.pull-demo-page div#container",
      lastItemSelector = listSelector + " > div:last-child";
    
  /* For this example, I prepend three rows to the list with the pull-down, and append
   * 3 rows to the list with the pull-up. This is only to make a clear illustration that the
   * action has been performed. A pull-down or pull-up might prepend, append, replace or modify
   * the list in some other way, modify some other page content, or may not change the page 
   * at all. It just performs whatever action you'd like to perform when the gesture has been 
   * completed by the user.
   */
  
  
  function gotPullUpData(event, data) {
	  $.ajax({ url: "script_get_best_products.php",
	        type: 'GET',
	        //data: '', //'budget_min='+ $('#budget_min').val() + '&budget_max='+ $('#budget_max').val(),
	        //async: false,
            data: 'tipo='+sessionStorage.tipo+'&budget='+sessionStorage.budget+'&profilo[]='+sessionStorage.profilo,
	        success: function(data) {
	         
             $("#page_giftlist div[data-role=content] div#container").append(data);
            // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 


             $('#container').BlocksIt({
                numOfCol: 2,
                offsetX: 8,
                offsetY: 8
              });
             $("#page_giftlist div[data-role=content]").iscrollview("refresh");             
           }
          }); // end ajax

	  
    
    var i,
        iscrollview = data.iscrollview,
        newContent = "";
    
  
    // The refresh is a bit different for the pull-up, because I want to demonstrate the use
    // of refresh() callbacks. The refresh() function has optional pre and post-refresh callbacks.
    // Here, I use a post-refresh callback to do a timed scroll to the bottom of the list
    // after the new elements are added. The scroller will smoothly scroll to the bottom over
    // a 400mSec period. It's important to use the refresh() callback to insure that the scroll
    // isn't started until the scroller has first been refreshed.
    iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview) { 
        this.scrollToElement(lastItemSelector, 400); 
        }, iscrollview) ); 
    }


  function gotPullUpData2(event, data) {
	  /*
	  $.ajax({ url: "get_list_item.php",
          type: 'POST',
          data: "item_type=riviste", //+ param,
          success: function(data) {          
            //alert();
             $("#page_list_item div[data-role=content] ul").append(data);
            // $("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
						
						$("#page_list_item div[data-role=content] ul" ).listview("refresh"); 
            
             $("#page_list_item div[data-role=content]").iscrollview("refresh");             
           }
          }); // end ajax 
*/
	var listcont = $("#page_list_item div[data-role=content] ul").html();
	$("#page_list_item div[data-role=content] ul").append(listcont);
	$("#page_list_item div[data-role=content] ul" ).listview("refresh");         
    $("#page_list_item div[data-role=content]").iscrollview("refresh");             
    
    var i,
        iscrollview2 = data.iscrollview,
        newContent = "";
    
  
    // The refresh is a bit different for the pull-up, because I want to demonstrate the use
    // of refresh() callbacks. The refresh() function has optional pre and post-refresh callbacks.
    // Here, I use a post-refresh callback to do a timed scroll to the bottom of the list
    // after the new elements are added. The scroller will smoothly scroll to the bottom over
    // a 400mSec period. It's important to use the refresh() callback to insure that the scroll
    // isn't started until the scroller has first been refreshed.
    iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview2) { 
        this.scrollToElement(lastItemSelector2, 400); 
        }, iscrollview2) ); 
    }
  
  
  // This is the callback that is called when the user has completed the pull-down gesture.
  // Your code should initiate retrieving data from a server, local database, etc.
  // Typically, you will call some function like jQuery.ajax() that will make a callback
  // once data has been retrieved.
  //
  // For demo, we just use timeout to simulate the time required to complete the operation.
  function onPullDown (event, data) { 
    setTimeout(function fakeRetrieveDataTimeout() {
      gotPullDownData(event, data);
      }, 
      1500); 
    }    

  // Called when the user completes the pull-up gesture.
  function onPullUp (event, data) { 
    
    
    setTimeout(function fakeRetrieveDataTimeout() {
      gotPullUpData(event, data);
      }, 
      1500); 
    }  


  function onPullUp2 (event, data) { 
	    
	    
	    setTimeout(function fakeRetrieveDataTimeout() {
	      gotPullUpData2(event, data);
	      }, 
	      1500); 
	    }    
  
  // Set-up jQuery event callbacks
  $(document).delegate("div.pull-demo-page", "pageinit", 
    function bindPullPagePullCallbacks(event) {
      $(".iscroll-wrapper", this).bind( {
      iscroll_onpulldown : onPullDown,
      iscroll_onpullup   : onPullUp
      } );
    } );


  $(document).delegate("#page_list_item", "pageinit", 
		    function bindPullPagePullCallbacks(event) {
		      $(".iscroll-wrapper", this).bind( {
		      iscroll_onpullup   : onPullUp2
		      } );
		    } );  

  }(jQuery));


 </script>




	<!-- 
 			=============================================
 						Terza Pagina: Categoria specifica
 			=============================================			
  -->



    <div data-role="page"  id="page_list_item" data-theme="f">
      
      <script>
       $( "#page_list_item" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#page_list_item a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
      
    <div data-role="header" data-theme="f" data-tap-toggle="false">
      <a data-rel="back" class="backbutton">Categorie</a>
      <h1></h1>
      <!--<a href="#" class="rectbutton">Affinare</a>-->
    </div>
    <div data-role="content" data-iscroll="" data-tap-toggle="false">
      <!-- content via ajax -->
     
    <ul data-role="listview" data-tap-toggle="false">

</ul> 

  <div class="iscroll-pullup">
      <span class="iscroll-pull-icon"></span>
      <span class="iscroll-pull-label" data-iscroll-loading-text="Caricamento..." data-iscroll-pulled-text="Custom pulled text">Custom reset text</span>
  </div>
</div>
      
      
    <!-- </div> -->
    <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c data-tap-toggle="false">
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="home.php" data-ajax="false" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="page.gift_list.php" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#all_gifts" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
                </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->   
  </div>
  
  
  
  <!-- 
      =============================================
            Quarta Pagina: Scheda prodotto
      =============================================     
  -->
  
  
  <script type="text/javascript">
    $('#scheda_prodotto').live('pageshow', function() {
      
      // carico dalla sessione e mostro nel footer il numero di prodotti nello shake
      var gift = getFromSession();
      if (gift != null)
       if (gift.products != null) {
        var productsSelected = gift.products;
        if (productsSelected.length > 0) {
            $('#scheda_prodotto #gifts_in_shake').css('visibility', 'visible');
            $('#scheda_prodotto #gifts_in_shake').html(productsSelected.length);
          }
      }
      
      });
	  
     $("[name=addProductDetails]").live("click", function (event) {
      

      var giftsSelected = new Array();
      
      var gift = getFromSession();
      
      if (gift != null) 
       if (gift.products != null) 
          giftsSelected = gift.products;
      
          
      
      var id = $(this).attr('id');
      
      //alert(id);
      giftsSelected.push(id);
      
      
      // salvo in sessione
      updateProductsArray(giftsSelected);
	  
	        // prendo l'id della pagina sulla quale l'utente si trova
      var activePage = $.mobile.activePage.attr("id");
      
      $('#' + activePage).find('#gifts_in_shake').css('visibility', 'visible');
      $('#' + activePage).find('#gifts_in_shake').html(giftsSelected.length);
	});
  </script>
  
  
   <div data-role="page"  id="scheda_prodotto" data-theme="f">
     
     <script>
       $( "#scheda_prodotto" ).live( "pageinit", function( event ) { // 9fb3cc       
          $('#scheda_prodotto a.backbutton').prepend('<div style="position: absolute; width: 16px; height: 17px; background: rgb(150, 174, 204); position: absolute; -webkit-transform: rotate(45deg); top: 3px; left: -8px; border: 1px solid rgba(0,0,0, 0.4); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2)"></div>');               
      });
    </script>
     
    <div data-role="header" data-theme="f" data-tap-toggle="false">
      <a data-rel="back" class="backbutton">Altro</a>
      <h1>Dettagli</h1>
      <!-- <a href="#">Affinare</a> -->
    </div>
    <div data-role="content" data-iscroll="">
      <!-- content via ajax -->     
    <ul style="margin-bottom: 40px" data-role="listview">
    </ul>
 
  </div>  <!-- end content -->
      
     
    <div data-role="footer" data-position="fixed" class="nav-glyphish-example" data-theme=c data-tap-toggle="false">
        <div data-role="navbar" class="nav-glyphish-example" >
          <ul>
            <li><a href="home.php" rel="external" id="home" data-icon="custom"><h4>Home</h4></a></li>
            <li><a href="#page_giftlist" id="search" data-icon="custom"><h4>Search</h4></a></li>
            <li><a href="#all_gifts" id="gift" data-icon="custom">
                <span id="gifts_in_shake" class="ui-li-count" style="left:42px; top:-9px; visibility: hidden "></span>
                <h4>Giftshake</h4>
            </a>
            </li>
            <li><a href="#" id="wishlist" data-icon="custom"><h4>Preferiti</h4></a></li>
          </ul>
        </div>
      </div> <!-- footer -->   
  </div>
  
  
  
  
  <!-- 
      =============================================
            Quinta Pagina: All gifts
      =============================================     
  -->
  
  <?php
   include("page.all_gifts.php");
  ?>
  
  
  
  <!-- 
      =============================================
            Sesta Pagina: Giftshake con votazioni del gruppo
      =============================================     
  -->
  
  <?php
   include("page.giftshake.votazioni.php");
  ?>
  
  
  
    <!-- 
      =============================================
            Settima Pagina: Fine, notifica il giftshake oppure salva
      =============================================     
  -->
  
  <?php
   //include("page.giftshake.notifica.php");
  ?>
  
  
  
  <!-- 
      =============================================
            Ottava Pagina: Survey, Vota, commenta
      =============================================     
  -->
  
  <?php
   /*include("page.survey.php");*/
  ?>
  
  
  
  
  
  

  <script>

    $(document).on( "click", ".show-page-loading-msg", function() {
      var $this = $( this ),
        theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
        msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
        textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
        textonly = !!$this.jqmData( "textonly" );
        html = $this.jqmData( "html" ) || "";
      $.mobile.loading( 'show', {
          text: msgText,
          textVisible: textVisible,
          theme: theme,
          textonly: textonly,
          html: html
      });
    })
    .on( "click", ".hide-page-loading-msg", function() {
      $.mobile.loading( "hide" );
    });
  </script>

  
 </body>  
</html>